@import '@kungfu-trader/kungfu-app/src/renderer/assets/less/variables.less';

.kf-translateZ {
  position: relative;
  transform: translateZ(0);
}

.kf-actions__warp {
  .anticon {
    margin-left: 16px;

    &:hover {
      color: @primary-color;
      cursor: pointer;
    }
  }
}

.kf-table {
  height: 100%;
  width: 100%;

  .kf-table-body {
    .current-global-kfLocation {
      background: @tooltip-bg;
    }
  }
}

.kf-hover {
  &:hover {
    color: @primary-color;
    cursor: pointer;
  }
}

.keyframes(@name, @rules) {
  @-webkit-keyframes @name {
    @rules();
  }

  @-moz-keyframes @name {
    @rules();
  }

  @-ms-keyframes @name {
    @rules();
  }

  @-o-keyframes @name {
    @rules();
  }

  @keyframes @name {
    @rules();
  }
}

.keyframes(KfStatusRunning, {
    0% {
        width: 6px;
        height: 6px;
        box-shadow: 0 0 0;
    }
    100% {
        width: 10px;
        height: 10px;
        box-shadow: 0 0 6px @primary-color
    }
});

.keyframes(KfStatusWaiting, {
    0% {
        width: 6px;
        height: 6px;
        box-shadow: 0 0 0;
    }
    100% {
        width: 10px;
        height: 10px;
        box-shadow: 0 0 6px fade(@white, 50%);
    }
});

.kf-dot {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;

  &.kf-color-running {
    background: @primary-color;

    &.kf-dot-wave {
      &::after {
        border: 1px solid @primary-color;
        animation: KfStatusRunning 1s infinite ease-in-out;
      }
    }
  }

  &.kf-color-waiting {
    background: fade(@white, 50%);

    &.kf-dot-wave {
      &::after {
        border: 1px solid fade(@white, 50%);
        animation: KfStatusWaiting 1s infinite ease-in-out;
      }
    }
  }

  &.kf-color-error {
    background: @red-6;
  }

  &.kf-dot-wave {
    position: relative;

    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      content: '';
    }
  }
}

.text-overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.color-default {
  color: fade(@white, 50%);
}
.color-orange {
  color: @orange-6;
}
.color-yellow {
  color: @yellow-6;
}
.color-pink {
  color: @pink-6;
}
.color-red {
  color: lighten(@red2-base, 10%);
}
.color-blue {
  color: @blue-6;
}
.color-purple {
  color: @purple-6;
}
.color-cyan {
  color: @cyan-6;
}
.color-green {
  color: @green2-base;
}
.color-gray {
  color: @text-color-secondary;
}
.color-text {
  color: @text-color;
}

.keyframes (@prefix,@name,@content) when (@prefix=def) {
  @keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=moz) {
  @-moz-keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=o) {
  @-o-keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=webkit) {
  @-webkit-keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=all) {
  .keyframes(moz,@name,@content);
  .keyframes(o,@name,@content);
  .keyframes(webkit,@name,@content);
  .keyframes(def,@name,@content);
}

.keyframes(all, nanoRedBlink, {
        0% {
            background: none;
        }
        50% {
            background: @red-6;
            color: #fff;
        }
        100% {
            background: none;
        }
    }
);

.keyframes(all, nanoGreenBlink, {
        0% {
            background: none;
        }
        50% {
            background: @green-6;
            color: #fff;
        }
        100% {
            background: none;
        }
    }
);

.keyframes(all, nanoRedColorBlink, {
    0% {
        color: @red-6;
    }
    50% {
        color: @red-8;
    }
    100% {
        color: @red-6;
    }
}
);

.keyframes(all, nanoGreenColorBlink, {
    0% {
        color: @green-6;
    }
    50% {
        color: @green-8;
    }
    100% {
        color: @green-6;
    }
}
);

.ant-btn-dangerous.ant-btn-primary {
  background: @red-6;
  border-color: @red-6;
}

.trading-data-detail__warp {
  user-select: text;
  padding-top: 8px;

  .trading-data-detail-row {
    .label,
    .value {
      display: inline-block;
      font-size: 14px;
    }

    .label {
      color: @text-color-secondary;
      padding-right: 8px;
    }
  }
}

.kf-modal-markdown__wrap {
  max-height: 600px;
  overflow-y: overlay;
  padding-right: 8px;

  .list {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 20px;
  }

  ul {
    .list();
    list-style-type: disc;
  }

  ol {
    .list();
    list-style-type: decimal;
  }

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    border-left: 5px solid rgba(238, 238, 238, 0.3);
  }
}
